<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div class="form-action">
        <el-form label-width="0" class="demo-ruleForm" :rules="rules" :model="writeData">
            <el-form-item
            prop="mobile">
                <el-input placeholder="手机号" type="text" v-model="writeData.mobile" maxlength="11" minlength="11"></el-input>
            </el-form-item>
            <br>
            <el-form-item
            prop="password">
                <el-input placeholder="密码" type="password" v-model="writeData.password">
            </el-input>
            </el-form-item>
        </el-form>
    </div>
    <el-button type="primary" style="width:20%" @click.native="login">登录</el-button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            writeData:{
                mobile:'',
                password:''
            },
            rules:{
                mobile:[
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '手机号长度为11个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        login(){
        	 
         this.$http.post('http://172.168.1.10:8080/api/user/login',{
             mobile:18305983446,
             password:1,
             openid:''
         }).then(res=>{
            //  console.log(res.data.data.userId)
            if(res.data.retCode==100){
                alert('登录成功！')
                localStorage.setItem("userId",res.data.data.userId);
                this.$router.push('/app')
            }else{
                alert('账号或者密码错误!');
                this.$router.go(0)
            }
         })
        },
        changeStyle(){
            var elInput=document.getElementsByClassName('el-input')[0]
            elInput.style.marginBottom='2rem'
        }
    },
    mounted(){
        this.changeStyle()
    }
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
.form-action{
    width: 20%;
    margin: 1rem 40%;
}
</style>
